import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_demo/components/keyboards/keyboard_media_query.dart';
import 'package:flutter_demo/components/keyboards/number_keyboard.dart';
import 'package:flutter_demo/components/room/message_item/view.dart';

class InfoPage extends StatelessWidget {
  const InfoPage({Key? key}) : super(key: key);
  final int itemCount = 13; // 消息总数量

  @override
  Widget build(BuildContext context) {
    return KeyboardMediaQuery(
      child: Scaffold(
          appBar: AppBar(
            title: const Text("分类"),
          ),
          body: Column(
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  alignment: Alignment.topCenter,
                  margin: const EdgeInsets.symmetric(vertical: 10),
                  child: Scrollbar(
                    child: ListView.builder(
                        reverse: true,
                        shrinkWrap: true,
                        itemCount: itemCount,
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            margin: const EdgeInsets.only(bottom: 10),
                            child: MessageItemComponent(index),
                          );
                        }),
                  ),
                ),
              ),
              Container(
                color: Colors.grey.shade50,
                constraints: const BoxConstraints(
                  maxHeight: 100,
                  minHeight: 5,
                ),
                margin: const EdgeInsets.all(10),
                width: double.infinity,
                child: TextField(
                  maxLength: 500,
                  maxLines: null,
                  // keyboardType: TextInputType.text,
                  keyboardType: NumberKeyboard.inputType,
                  decoration: InputDecoration(
                    suffixIcon: const Icon(Icons.send),
                    hintText: "请输入内容",
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.grey.shade200,
                        width: 1,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.grey.shade400,
                        width: 1,
                      ),
                    ),
                  ),
                ),
              )
            ],
          )),
    );
  }
}
